
<template name="sendcar">
  <!-- 物资单列表 做入库申请单 -->
  <view class="mypage">
    <view class="cu-bar search bg-white">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input type="text" placeholder="请输入物资名称" v-model="keyword" />
        <input type="text" placeholder="请输入物资规格" v-model="keyword2" />
      </view>
      <view class="action">
        <button class="cu-btn bg-blue shadow-blur round" @tap="handelSearch">搜索</button>
      </view>
    </view>

    <view class="card-list-wrapper">
      <view
        class="card-list-row radius shadow-warp bg-white margin-top"
        v-for="(item,index) in planList"
        :key="index"
        @click="openDetail(index)"
      >
        <view class="flex-just-between bottom-border top-wrap">
          <text class="text-blue text-bold">物资单号：{{ item.BILLNO || item.PK_OUTSTOCK_DTL }}</text>
          <view class="cu-capsule radius">
            <view class="cu-tag bg-blue sm">
              <text class="cuIcon-medal"></text>
            </view>
            <view class="cu-tag line-brown sm">{{ index+1}}</view>
          </view>
        </view>

        <view class="card-list-row-1 margin-top">
          <text class="cuIcon-title text-red"></text>
          <text>名称：{{ item.VNAME || item.MATERIALNAME }}</text>
        </view>

        <view class="card-list-row-1">
          <text class="cuIcon-title text-orange"></text>
          <text>规格：{{ item.MATCLASSNAME || item.MATSPEC }}</text>
          <text class="text-blue">&emsp; {{ item.NNUMSQ || '' }}&emsp;</text>|
          <!-- <text class="text-red">&emsp;￥{{ '32.00'}}</text> -->
        </view>

        <view class="position-a checkFlag" v-if="item.ischeck">
          <text class="cuIcon-squarecheckfill text-blue"></text>
        </view>
      </view>
    </view>

    <view class="next-btn-wrap position-f" @click="nextTap">
      <button class="big-btn bg-green shadow-blur">
        <text class="cuIcon-refresharrow text-bold"></text>
      </button>
    </view>

    <modal
      title="高级查询"
      placeholder
      :isShow="isShowModal"
      @cancelModal="cancelModal"
      @okModal="okModal"
    ></modal>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import api from "@/common/api.js";
import utils from "@/common/util.js";
import modal from "@/components/modal/modal_mater.vue";
let query = {
  category: "BD_MATERIAL",
  page: 1,
  rows: "10",
  sidx: "",
  sord: "",
  queryJson: {},
  userId: "",
  account: "admin"
};
let _self,
  menuType,
  page = 1,
  total = 1,
  queryJson = {
    BILLNO: ""
  };
export default {
  computed: mapState(["userInfo", "baseUrl"]),
  data() {
    return {
      planList: [],
      keyword: "",
      keyword2: "",
      isShowModal: false
      // cancelModal: '',
    };
  },
  components: {
    modal
  },
  onNavigationBarButtonTap() {
    this.isShowModal = true;
  },
  onLoad(p) {
    // console.log(p)
    _self = this;
    menuType = p.sqlTbName;
    query.category = "BD_MATERIAL"; // 手工入库 + 申请入库 使用基础物资
    query.userId = _self.userInfo.UserId;
    query.account = _self.userInfo.Account;
    page = 1;
    total = 1;
    this.getList();
  },

  //下拉刷新
  onPullDownRefresh: function() {
    // 重置分页及数据
    page = 1;
    total = 1;
    this.getList();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 1000);
    uni.showToast({
      title: "数据已刷新",
      icon: "none"
    });
  },
  // 加载更多
  onReachBottom: function() {
    this.getList();
  },
  methods: {
    openDetail: function(e) {
      _self.planList[e].ischeck = !_self.planList[e].ischeck;
    },
    handelSearch() {
      queryJson.BILLNO = _self.keyword;
      let a = {
        MATSPEC: _self.keyword2,
        MATERIALNAME: _self.keyword,
        VNAME: _self.keyword,
        BILLNO: ""
      };
      queryJson = { ...a };
      // console.log(_self.keyword);
      // console.log(query);
      page = 1;
      total = 1;
      _self.planList = [];
      this.getList();
    },
    nextTap() {
      let t = [];
      _self.planList.forEach(item => {
        if (item.ischeck) {
          t.push(item);
        }
      });
      if (t.length < 1) return _self.$utils.tips("请至少选择一个物资！");
      // uni.$emit('selectMat', {list:'55' } );
      let uu = "/pages/tab01/inbound/submit-manual?data=";
      switch (menuType) {
        case "apply": // 新增入库申请单
          uu = "/pages/tab01/inbound/submit-apply?data=";
          break;
        case "manual": // 手工入库
          uu = "/pages/tab01/inbound/submit-manual?data=";
          break;
        case "M1006": // 手工出库
          uu = "/pages/tab01/detail-out?data=";
          break;
        default:
          break;
      }
      uni.navigateTo({
        url: uu + encodeURIComponent(JSON.stringify(t))
      });
    },
    getList() {
      if (page > total) {
        return utils.tips("没有数据了");
      }
      query.page = page;
      query.queryJson = JSON.stringify(queryJson);
      // console.log(query);
			this.axios({
				url: api.apiPublic.getMaterList ,
				data: query ,
				isLoading: 1
			}).then(res=>{
				let { Result } = res ;
				let array = Result.rows.map(item => {
				  item.ischeck = false;
				  return item;
				});
				if (page == 1) {
				  _self.planList = array;
				  if (_self.planList.length == 0) {
				    utils.tips("暂无数据！");
				  }
				  _self.setPageTitle("物资单列表(" + Result.records + ")");
				} else {
				  _self.planList = _self.planList.concat(array);
				}
				queryJson = {};
				total = Result.total;
				page++;
			})
    },
    setPageTitle(d) {
      uni.setNavigationBarTitle({
        title: d
      });
    },

    // 控制高级查询条件
    cancelModal() {
      this.isShowModal = false;
    },
    okModal(val) {
      this.cancelModal();
      queryJson = { ...val };
      page = 1;
      total = 1;
      _self.planList = [];
      this.getList();
    }
  }
};
</script>

<style scoped>
.height50 {
  height: 50px;
}

.card-list-wrapper {
  width: 710upx;
  height: 100upx;
  margin: 0 auto;
}

.card-list-row {
  padding: 20upx;
}

.card-list-row-1 {
  padding: 10upx 0;
}

.top-border {
  border-top: 1upx solid rgba(0, 0, 0, 0.1);
}

.top-wrap {
  padding-bottom: 20upx;
}

.bottom-border {
  border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}

.btn-wrap {
  padding-top: 20upx;
}

.checkFlag {
  top: 50%;
  right: 20upx;
  font-size: 40upx;
}

.next-btn-wrap {
  position: fixed;
  right: 50upx;
  bottom: 100upx;
}

.big-btn {
  width: 100upx;
  height: 100upx;
  border-radius: 50upx;
  font-size: 40upx;
}
</style>
